import { EChartsOption } from 'echarts'
import echarts from '@/plugins/echarts'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const { t } = useI18n()
const barTopColor = ["rgb(124,16,16)", "rgb(215,25,25)", "rgb(225,86,72)", "#FFA500", "rgb(191,173,15)", "#2196F3", "rgb(105,190,239)", "#008000", "rgb(41,183,41)", "rgb(101,235,101)"];
const barBottomColor = [
  "rgba(124,16,16,0.1)",
  "rgba(215,25,25,0.1)",
  "rgba(225,86,72,0.1)",
  "#FFA50001",
  "rgb(191,173,15,0.1)",
  "#2196F301",
  "rgba(105,190,239,0.1)",
  "#00800001",
  "rgba(41,183,41,0.1)",
  "rgba(101,235,101,0.1)"
];

const textColor = appStore.getIsDark ? '#fff' : 'rgb(48, 49, 51)'
export const barClassifyOptions: EChartsOption = {
  legend: {
    top: '30px',
    textStyle: {
      color: textColor
    }
  },
  tooltip: {
    trigger: "item",
    position: "top",
    formatter: function (param) {
      return (
        "<div>" +
        '<p style="vertical-align:middle;width:10px;margin-right:5px;display:inline-block;height:10px;background:' +
        param.color +
        ';"></p>' +
        '<p style="vertical-align:middle;display:inline-block;margin-right:5px">' +
        param.seriesName +
        "</p>" +
        '<p style="vertical-align:middle;display:inline-block;">' +
        param.value +
        "</p>" +
        "</div>"
      );
    },
  },
  grid: {
    left: 10,
    top: "0%",
    right: 0,
    bottom: "40%",
    containLabel: false,
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    type: "category",
    data: [""],
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      textStyle: {
        color: textColor,
      },
    },
  },
  series: []
}

export const barOptions: EChartsOption = {
  title: {
    text: t('report.defectLevelBarTitle'),
    subtext: t('report.defectLevelBarSubTitle'),
    left: "center",
    textStyle: {
      color: textColor,
      fontSize: 18,
      fontWeight: "bold",
    },
    subtextStyle: {
      fontSize: 12,
      color: textColor
    }
  },
  grid: {
    top: "25%",
    bottom: "15%",
    left: "5%",
    right: "5%",
  },
  xAxis: {
    data: [],
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      rotate: -45,
      show: true,
      margin: 35,
      align: "center",
      textStyle: {
        fontSize: 14,
        color: textColor,
        rich: {
          a: {
            fontSize: 12,
            color: textColor,
          },
          b: {
            height: 20,
            fontSize: 14,
            color: textColor,
          },
        },
      },
    },
  },
  yAxis: {
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  series: [
    {
      name: "柱顶部",
      type: "pictorialBar",
      symbolSize: [26, 10],
      symbolOffset: [0, -5],
      z: 12,
      itemStyle: {
        normal: {
          color: function (params) {
            return barTopColor[params.dataIndex];
          },
        },
      },
      label: {
        show: true,
        position: "top",
        fontSize: 16,
      },
      symbolPosition: "end",
      data: [],
    },
    {
      name: "柱底部",
      type: "pictorialBar",
      symbolSize: [26, 10],
      symbolOffset: [0, 5],
      z: 12,
      itemStyle: {
        normal: {
          color: function (params) {
            return barTopColor[params.dataIndex];
          },
        },
      },
      data: [],
    },
    {
      name: "第一圈",
      type: "pictorialBar",
      symbolSize: [47, 16],
      symbolOffset: [0, 11],
      z: 11,
      itemStyle: {
        normal: {
          color: "transparent",
          borderColor: "#3ACDC5",
          borderWidth: 2,
        },
      },
      data: [],
    },
    {
      name: "第二圈",
      type: "pictorialBar",
      symbolSize: [62, 22],
      symbolOffset: [0, 17],
      z: 10,
      itemStyle: {
        normal: {
          color: "transparent",
          borderColor: barTopColor[0],
          borderWidth: 2,
        },
      },
      data: [],
    },
    {
      type: "bar",
      itemStyle: {
        normal: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 1,
                color: barTopColor[params.dataIndex],
              },
              {
                offset: 0,
                color: barBottomColor[params.dataIndex],
              },
            ]);
          },
          opacity: 0.8,
        },
      },
      z: 16,
      silent: true,
      barWidth: 26,
      barGap: "-100%", // Make series be overlap
      data: [],
    },
  ],
};

export const horizontalBarOptions: EChartsOption = {
  title: {
    text: t('report.defectCountBarTitle'),
    subtext: t('report.defectCountBarSubTitle'),
    left: 'center',
    textStyle: {
      color: textColor,
      fontSize: 18,
      fontWeight: "bold",
    },
    subtextStyle: {
      fontSize: 12,
      color: textColor
    }
  },
  grid: {
    left: "5%",
    right: "5%",
    bottom: "0%",
    top: "15%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "none",
    },
    formatter: function (params) {
      return (
        params[0].name +
        "<br/>" +
        "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
        params[0].seriesName +
        " : " +
        Number(
          (params[0].value)
        ).toLocaleString() +
        " <br/>"
      );
    },
  },
  xAxis: {
    show: false,
    type: "value",
  },
  yAxis: [
    {
      type: "category",
      inverse: true,
      axisLabel: {
        show: true,
        textStyle: {
          color: textColor,
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: ["系统信息泄露", "未释放资源", "路径操作", "依赖性比较", "异常捕获", "系统信息泄露", "未释放资源", "路径操作", "依赖性比较", "异常捕获"],
    },
    {
      type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        textStyle: {
          color: textColor,
          fontSize: "12",
        },
        formatter: function (value) {
          if (value >= 10000) {
            return (value / 10000).toLocaleString() + "万";
          } else {
            return value.toLocaleString();
          }
        },
      },
      data: [50, 22, 10, 5, 3, 2, 1, 0, 0, 0],
    },
  ],
  series: [
    {
      name: "数量",
      type: "bar",
      zlevel: 1,
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgb(57,89,255,1)",
            },
            {
              offset: 1,
              color: "rgb(46,200,207,1)",
            },
          ]),
        },
      },
      barWidth: 20,
      data: [50, 22, 10, 5, 3, 2, 1, 0, 0, 0],
    },
    {
      name: "背景",
      type: "bar",
      barWidth: 20,
      barGap: "-100%",
      data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
      itemStyle: {
        normal: {
          color: "rgba(24,31,68,0.5)",
          barBorderRadius: 30,
        },
      },
    },
  ],
};

export const multipleLineOptions: EChartsOption = {
  color: ["rgba(101,235,101,1)", "#2196F3", "#FFA500"],

  title: [
    {
      text: "测试任务数",
      top: "0%",
      textStyle: {
        color: textColor,
      },
    }
  ],
  tooltip: {
    trigger: "axis",
  },
  legend: {
    top: "7%",
    textStyle: {
      color: textColor,
    },
    data: ["完成", "进行中", "待测试"],
  },
  grid: {
    left: "1%",
    right: "2%",
    top: "16%",
    bottom: "2%",
    containLabel: true,
  },
  toolbox: {
    show: false,
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    axisLine: {
      lineStyle: {
        color: textColor,
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      textStyle: {
        color: textColor,
      },
    },
    boundaryGap: false,
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  },
  yAxis: {
    axisLine: {
      lineStyle: {
        color: textColor,
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: textColor,
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      textStyle: {
        color: textColor,
      },
    },
    type: "value",
  },
  series: [
    {
      name: "完成",
      smooth: true,
      type: "line",
      symbolSize: 8,
      symbol: "circle",
      data: [90, 50, 39, 50, 120, 82, 80],
    },
    {
      name: "进行中",
      smooth: true,
      type: "line",
      symbolSize: 8,
      symbol: "circle",
      data: [70, 50, 50, 87, 90, 80, 70],
    },
    {
      name: "待测试",
      smooth: true,
      type: "line",
      symbolSize: 8,
      symbol: "circle",
      data: [290, 200, 20, 132, 15, 200, 90],
    }
  ],
}
const data = [
  {
    name: "致命",
    value: 10,
  },
  {
    name: "严重",
    value: 10,
  },
  {
    name: "重要",
    value: 10,
  },
  {
    name: "次要",
    value: 10,
  },
  {
    name: "一般",
    value: 10,
  },
  {
    name: "轻微",
    value: 20,
  },
  {
    name: "正常",
    value: 30,
  },
]
export const pieOptions: EChartsOption = {
  color: [
    "rgba(124,16,16,1)",
    "rgba(215,25,25,1)",
    "rgba(225,86,72,1)",
    "#FFA500",
    "#0F347B",
    "rgba(105,190,239,1)",
    "rgba(101,235,101,1)"
  ],
  title: {
    text: "问题总数",
    subtext: 7789,
    textStyle: {
      color: textColor,
      fontSize: 20,
      // align: 'center'
    },
    subtextStyle: {
      fontSize: 18,
      color: ["#ff9d19"],
    },
    x: "center",
    y: "center",
  },
  grid: {
  },
  legend: {
    top: "2%",
    textStyle: {
      color: textColor,
      fontSize: 12,
    },
    icon: "roundRect",
    data: data,
  },
  series: [
    // 主要展示层的
    {
      radius: ["35%", "61%"],
      center: ["50%", "50%"],
      type: "pie",
      label: {
        normal: {
          show: true,
          formatter: "{b}: {d}\n{c}%",
          textStyle: {
            fontSize: 14,
          },
          position: "outside",
        },
        emphasis: {
          show: true,
        },
      },
      labelLine: {
        normal: {
          show: true,
          length: 30,
          length2: 55,
        },
        emphasis: {
          show: true,
        },
      },
      name: "",
      data: data,
    },
    // 边框的设置
    {
      radius: ["30%", "34%"],
      center: ["50%", "50%"],
      type: "pie",
      label: {
        normal: {
          show: false,
        },
        emphasis: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
        emphasis: {
          show: false,
        },
      },
      animation: false,
      tooltip: {
        show: false,
      },
      data: [
        {
          value: 1,
          itemStyle: {
            color: "rgba(250,250,250,0.3)",
          },
        },
      ],
    },
    {
      name: "外边框",
      type: "pie",
      clockWise: false, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      center: ["50%", "50%"],
      radius: ["65%", "65%"],
      label: {
        normal: {
          show: false,
        },
      },
      data: [
        {
          value: 9,
          name: "",
          itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: "#0b5263",
            },
          },
        },
      ],
    },
  ],
};
